<template>
  <div class="card-out-container">
    <a-form layout="inline" v-if="showMore" class="multi-line-search-form">
      <a-form-item :label="$t('deviceManage.waterLineNo')">
        <a-input v-model:value.trim="queryParam.lineNo" :placeholder="$t('other.pleaseInputWaterLineNo')"  allowClear/>
      </a-form-item>

      <a-form-item :label="$t('deviceManage.workShop')">
        <a-select v-model:value="queryParam.groupId" allowClear :placeholder="$t('common.pleaseSelect')">
          <a-select-option v-for="(item,key) in waGroupList" :key="key" :value="item.id">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData">{{ $t('common.see') }}</a-button>
          <a-button @click="searchReset">{{ $t('common.reset') }}</a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <CustomTable
      :operateMargin="true" storeTableName="assemblyTable" rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns"
      :rowSelection="
        isEnvLocal
          ? null
          : {
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
              getCheckboxProps: checkboxProps,
              fixed: 'left',
            }
      "
      :pagination="ipagination"
      @change="handleTableChange"
      :scroll="{ y: 'calc(100vh - 390px)' }"
      :showMore="showMore"
    >
      <template #operateLeft>
        <div class="operate-left">
          <a-button
            v-if="isEnvLocal"
            type="primary"
            @click="syncData(syncDataAry)"
            >{{ $t('common.sync') }}</a-button
          >
          <span v-else>
            <a-button type="primary" @click="modalDo({}, 'addForm')">{{$t('common.addNew')}}</a-button>
            <a-button type="warning" ghost :disabled="!selectedRowKeys.length" @click="handleDelete(null)">{{$t('common.delMore')}}</a-button>
          </span>
        </div>
      </template>
      <template #operateRight>
        <div class="slot-operate-right">
          <a-input-search
            v-model:value.trim="fuzzySearch"
            enter-button
            :placeholder="$t('deviceManage.waterLineNo')"
            v-if="!showMore"
            @search="loadData"
          />
          <a-button class="ml-10" @click="toggleMore" type="primary" ghost>{{$t('common.highFilter')}}</a-button>
        </div>
      </template>
      <template #bodyCell="{ scope }">
        <template v-if="scope.column.key === 'code'">
          <span class="code-link" @click="handleDrawDetail(scope.record)">{{ scope.record.code }}</span>
        </template>
        <template v-if="scope.column.key === 'lineType'">
          {{ scope.record.lineType == 1 ? $t('other.dgLine') : $t('other.defaultDgLine') }}
        </template>
        <template v-if="scope.column.key === 'operate'">
          <span class="table-operate-container">
            <a-button type="link" class="primary-link" @click="modalDo(scope.record, 'editForm', true)">{{$t('common.editor')}}</a-button>
            <a-divider type="vertical" />
            <a-button type="link" class="warning-link" :disabled="!Boolean(scope.record.isDelete)" @click="handleDelete(scope.record.id)">{{$t('common.del')}}</a-button>
            <a-divider type="vertical" /> 
            <a-button type="link" class="primary-link" @click="handlePushDialog(scope.record)">{{$t('deviceManage.puttSetting')}}</a-button>
          </span>
        </template>
      </template>
    </CustomTable>

    <detail-draw ref="detailForm"></detail-draw>
    <add-dialog ref="addForm" @ok="modalFormOk"></add-dialog>
    <edit-dialog ref="editForm" @ok="modalFormOk"></edit-dialog>
    <push-dialog ref="pushForm" @ok="modalFormOk" :isView="isEnvLocal"></push-dialog>
    <SyncDataModal ref="syncDataModalRef" />
  </div>
</template>

<script>
import { ListMixinPm } from "@/mixin/listMixinPm.js";
import AddDialog from "./modules/addDialog.vue";
import EditDialog from "./modules/editDialog.vue";
import PushDialog from "./modules/pushDialog.vue";
import DetailDraw from "./modules/detailDraw.vue";
// import axios from "@/utils/request";
import CustomTable from "@/components/commonTable/customTable.vue";
import { normalColumns } from "./modules/config";
import SyncDataModal from "@/components/syncModal/syncDataModal.vue";
import {store} from "@/store";
import {mapState} from "vuex";

export default {
  name: "hangLineAssembly",
  mixins: [ListMixinPm],
  components: {
    AddDialog,
    EditDialog,
    PushDialog,
    DetailDraw,
    CustomTable,
    SyncDataModal,
  },
  computed:{
    ...mapState({
      waGroupList: state => state.normalData.waGroupList
    })
  },

  data() {
    return {
      storeName: 'getWater',
      url: {
        list: "/api/device/hanger-line/page",
        delete: "/api/device/hanger-line/delete",
        save: "/api/device/hanger-line/save",
        // groupArray: "/api/device/hanger-line-group/list",
        sync: "/api/system/iot/sync-cloud-data",
      },
      columns: normalColumns,
      lineTypeArray: [{ label: this.$t('other.dgLine'), value: 1 }, { label: this.$t('other.defaultDgLine'), value: 2 },],
      // groupArray: [],
      portArray: [
        { label: "COM1", value: "COM1" },
        { label: "COM2", value: "COM2" },
        { label: "COM3", value: "COM3" },
        { label: "COM4", value: "COM4" },
        { label: "COM5", value: "COM5" },
        { label: "COM6", value: "COM6" },
        { label: "COM7", value: "COM7" },
        { label: "COM8", value: "COM8" },
        { label: "COM9", value: "COM9" },
        { label: "COM10", value: "COM10" },
      ],
      fuzzySearchName: "lineNo",
      syncDataAry: [
        { syncIotCloudDataType: "ihs:device:hangerLine" },
        { syncIotCloudDataType: "ihs:device:hangerLinePushRod" },
        { syncIotCloudDataType: "ihs:device:hangerLineGroup" },
      ],
    };
  },
  async created() {
    await store.dispatch('getWaGroup')
  },
  methods: {
    checkboxProps(record) {
      return {
        disabled: !record.isDelete,
      };
    },
    async handlePushDialog(record) {
      if (typeof this.initModalSelectOptions === "function") {
        this.$refs.pushForm.initSelectOptions(this.initModalSelectOptions());
      }
      this.$refs.pushForm.edit(record, true);
    },
    initModalSelectOptions() {
      return {
        waGroupList: this.waGroupList,
        lineTypeArray: this.lineTypeArray,
        portArray: this.portArray,
      };
    },
  },
};
</script>